<script setup lang="ts">

import dayjs from 'dayjs';
import relativeTime from 'dayjs/plugin/relativeTime';
import { ref } from 'vue';
dayjs.extend(relativeTime);

type Comment = Record<string, string>;

/**评论列表 */
const comments = ref<Comment[]>([]);
/**是否在提交中 */
const submitting = ref<boolean>(false);
/**评论框内容 */
const commentValue = ref<string>('');
// 发送评论
const handleSubmit = () => {
  if (!commentValue.value) {
    return;
  }

  submitting.value = true;

  setTimeout(() => {
    submitting.value = false;
    comments.value = [
      {
        author: 'Han Solo',
        avatar: '/user-avatar.jpg',
        content: commentValue.value,
        datetime: dayjs().fromNow(),
      },
      ...comments.value,
    ];
    commentValue.value = '';
  }, 1000);
};

</script>

<template>
  <div class="comments-container">
    <div class="comments-list scroll-bar">
      <a-list v-if="comments.length" :data-source="comments" :header="`${comments.length}个评论`" item-layout="horizontal">
        <template #renderItem="{ item }">
          <a-list-item>
            <a-comment :author="item.author" :avatar="item.avatar" :content="item.content" :datetime="item.datetime" />
          </a-list-item>
        </template>
      </a-list>
    </div>
    <div class="comments-input">
      <a-comment>
        <template #avatar>
          <a-avatar src="/user-avatar.jpg" alt="Han Solo" />
        </template>
        <template #content>
          <a-form-item>
            <a-textarea v-model:value="commentValue" :rows="2" />
          </a-form-item>
          <a-form-item>
            <a-button html-type="submit" :loading="submitting" type="primary" @click="handleSubmit">
              发布评论
            </a-button>
          </a-form-item>
        </template>
      </a-comment>
    </div>
  </div>
</template>


<style lang="scss" scoped>
.comments {
  &-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden
  }

  &-list {
    flex: 1;
    overflow-y: scroll;

    :deep(.ant-comment-avatar) {
      display: flex;
    }

    :deep(.ant-list-item) {
      padding: 0;
    }
  }

  &-input {
    :deep(.ant-comment-inner) {
      padding: 0;
    }

    :deep(.ant-form-item) {
      margin: $educ-margin-base;
    }

  }
}
</style>